<template>
    <div id="app1">
      <img src="../../public/600.png" alt="Banner Image" class="banner-image" />
      <Header />
      <router-view></router-view>
      <Carousel />
      <div class="modules-container">
        <Module1 />
        <Module2 />
        <Module3 />
        <Module4 />
      </div>
      <Footer />
    </div>
  </template>
  
  <script>
  import Carousel from '../components/Carousel.vue'
  import Footer from '../components/Footer.vue'
  import Header from '../components/Header.vue'
  import Module1 from '../components/Module1.vue'
  import Module2 from '../components/Module2.vue'
  import Module3 from '../components/Module3.vue'
  import Module4 from '../components/Module4.vue'
  
  export default {
    components: {
      Header,
      Carousel,
      Module1,
      Module2,
      Module3,
      Module4,
      Footer
    }
  }
  </script>
  
  <style>
  #app1 {
    font-family: Avenir, Helvetica, 宋体, sans-serif;
    text-align: center;
    color: #2c3e50;
    background-color: #166e3d;
  }
  .banner-image {
    width: 350px;
    height: 100px;
    object-fit: cover;
  }
  .modules-container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap; /* 如果模块太多超出屏幕宽度，它们将换行 */
    margin-bottom: 42px;
    background-color: aliceblue;
  }
  
  .module {
    flex: 1; /* 模块将平均分配容器的宽度 */
    min-width: 200px; /* 设置模块的最小宽度，根据需要调整 */
    margin: 10px; /* 设置模块之间的间距 */
  }
  </style>
  